<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>学生选题管理</el-breadcrumb-item> 
      <el-breadcrumb-item>学生申报课题</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card >
      <div v-if="!subjectList.length && !declareList.length">
        <el-button type="primary" icon="el-icon-edit" round size="small" @click="showAddDialog">申报课题</el-button>
        <h1 style="margin:50px 100px">您还未申报/选择课题，赶紧申报一个趴!</h1>
        <h1 v-if="deadline.subjectDeclare" style="margin:50px 100px; color:red">课题申报截止时间: {{$moment(deadline.subjectDeclare).format('YYYY-MM-DD HH:mm:ss')}}</h1>
      </div> 
      <div v-if="declareList.length">
        <h1 style="margin:50px 100px">您已确定课题，不能再申报了哦!</h1>
      </div>
      <!--表格区域-->
      <el-table :data="subjectList" stripe v-show="subjectList.length && !declareList.length">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="课题题目" prop="sub.name"></el-table-column>
        <el-table-column align="center" label="课题类型" prop="sub.type.label">
          <template slot-scope="scope">
            <el-tag >{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" prop="sub.source.label">
          <template slot-scope="scope">
            <el-tag type="info">{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="指导老师" >
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报时间">
          <template slot-scope="scope">
            <span>{{$moment(scope.row.sub.declareTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报状态">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="statusObj[scope.row.sub.status].type">{{statusObj[scope.row.sub.status].label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作(编辑/取消申报)">
          <template slot-scope="scope">
            <el-button type="success" circle icon="el-icon-edit" :disabled="scope.row.sub.status > 2" @click.native="showEditDialog(scope.row.sub)"></el-button>
            <el-button type="danger" circle icon="el-icon-delete" :disabled="scope.row.sub.status > 2" @click.native="cancelDeclare(scope.row.sub.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--申报课题的对话框-->
    <el-dialog title="申报课题" :visible.sync="addDialogVisible" @close="addForm = {}">
      <!--主体内容区域-->
      <el-form :model="addForm" :rules="formRules" ref="addFormRef" label-width="80px" style="margin: 0 100px">
        <el-form-item prop="name" label="课题名称">
          <el-input v-model="addForm.name" placeholder="请输入课题名称" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item prop="typeId" label="课题类型">
          <el-select value-key="id" v-model="addForm.typeId" placeholder="请选择课题类型">
            <el-option v-for="type in typeList" :key="type.id" :value="type.id" :label="type.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="sourceId" label="课题来源">
          <el-select value-key="id" v-model="addForm.sourceId" placeholder="请选择课题来源">
            <el-option v-for="source in sourceList" :key="source.id" :value="source.id" :label="source.label"></el-option>
          </el-select>
        </el-form-item> 
        <el-form-item prop="teaId" label="指导老师">
          <el-select v-model="addForm.teaId" placeholder="请选择指导老师">
            <el-option :key="guideTeacher.id" :value="guideTeacher.id" :label="guideTeacher.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="课题简介">
          <el-input v-model="addForm.introduce" placeholder="请输入课题简介" type="textarea" :rows="5" style="width:80%"></el-input>
        </el-form-item>
        <el-row style="margin-left:30%;margin-top:30px">
          <el-button @click.native="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click.native="studentAddSubject('addFormRef')">确 定</el-button>
        </el-row>
      </el-form> 
    </el-dialog>

    <!--修改课题的对话框-->
    <el-dialog title="修改课题" :visible.sync="editDialogVisible">
      <!--主体内容区域-->
      <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="80px" style="margin: 0 100px">
        <el-form-item prop="name" label="课题名称">
          <el-input v-model="editForm.name" placeholder="请输入课题名称" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item prop="typeId" label="课题类型">
          <el-select value-key="id" v-model="editForm.typeId" placeholder="请选择课题类型">
            <el-option v-for="type in typeList" :key="type.id" :value="type.id" :label="type.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="sourceId" label="课题来源">
          <el-select value-key="id" v-model="editForm.sourceId" placeholder="请选择课题来源">
            <el-option v-for="source in sourceList" :key="source.id" :value="source.id" :label="source.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="teaId" label="指导老师">
          <!-- <el-select value-key="id" v-model="addForm.teaId" placeholder="请选择指导老师">
            <el-option v-for="teacher in teacherList" :key="teacher.id" :value="teacher.id" :label="teacher.name"></el-option>
          </el-select> -->
          <el-select v-model="editForm.teaId" placeholder="请选择指导老师">
            <el-option :key="guideTeacher.id" :value="guideTeacher.id" :label="guideTeacher.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="课题简介">
          <el-input v-model="editForm.introduce" placeholder="请输入课题简介" type="textarea" :rows="5" style="width:80%"></el-input>
        </el-form-item>
        <el-row style="margin-left:30%;margin-top:30px">
          <el-button @click.native="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click.native="studentEditSubject('editFormRef')">确 定</el-button>
        </el-row>
      </el-form> 
    </el-dialog>
  </div>
</template>

<script>
  import {getStudentSubjectList, studentUpdateSubject, removeSubjectBySubId} from '../../axios/subject' 
  import {getSubjectTypeList, studentDeclareSubject} from '../../axios/subject'  
  import {getGuideTeacherList} from '../../axios/student'
  import {compareDate} from '../../js/time'
  import {userGetDeadline} from '../../axios/time'
  export default {
    name: 'StudentSubjectDeclare',
    data() {
      return { 
        deadline:{}, // 该专业截止时间信息
        subjectList: [], // 学生申报课题，待审核列表
        declareList: [], // 学生申报课题，审核通过列表
        typeList: [], // 课题类型列表
        sourceList: [{id: 1, label: '学生自拟'}], // 课题来源列表
        // teacherList: [], // 指导老师列表
        guideTeacher: {},
        addDialogVisible: false, // 添加对话框的显示/隐藏
        editDialogVisible: false, // 编辑对话框的显示/隐藏
        addForm: {},// 申报课题表单 
        editForm: {}, // 修改课题表单
        // 表单规则
        formRules: {
          name: [ { required: true, message: '请输入课题名称', trigger: 'blur' } ],
          typeId: [ { required: true, message: '请选择课题类型', trigger: 'change' } ],
          sourceId: [  { required: true, message: '请选择课题来源', trigger: 'change' } ],
          introduce: [  { required: true, message: '请输入课题简介', trigger: 'blur' } ],
          teaId: [  { required: true, message: '请选择指导老师', trigger: 'blur' } ]
        },
        statusObj: {
          1: { type: 'warning', label: '待审核' },
          2: { type: 'danger', label: '未通过' },
          3: { type: 'success', label: '已通过' },
          4: { type: 'info',  label: '已被选' }
        }
      }
    },
    methods:{ 
      getTypeAndGuideTeacher(){
        // 获取课题类型列表
        getSubjectTypeList().then(res => {
          if (res.success){
            this.typeList = res.data 
          } 
        }) 
        // // 查询指导老师  
        getGuideTeacherList().then(res => {
          if (res.success){
            // this.teacherList = res.data 
            this.guideTeacher = res.data
          } 
        })  
      },
      // 展示申报课题对话框
      showAddDialog(){
        if(this.deadline.subjectDeclare !== null){
          if(!compareDate(this.deadline.subjectDeclare)){
            this.$message.error('课题申报已截止!')
            return ;
          }
        }   
        this.addForm.sourceId = 1
        this.addForm.teaId = this.guideTeacher.id
        this.addDialogVisible = true 
      },
      // 获取学生申报的所有课题列表
      getSubjectList(){
        // 从后端获取数据
        getStudentSubjectList().then(res => {
          if(res.success){   
            this.subjectList = res.data.filter(item => item.sub.sourceId === 1) // 自己申报
            this.declareList = res.data.filter(item => item.sub.status === 4) // 自己已选择课题
          }
        })  
      },
      // 学生申报课题提交
      studentAddSubject(addFormRef){ 
        this.$refs[addFormRef].validate(valid => {
          if(valid){
            // 验证成功，发送后端请求  
            studentDeclareSubject(this.addForm).then(res => {
              if(res.success){ 
                this.$message.success('申报课题成功')
                this.addDialogVisible = false
                this.getSubjectList()
              } 
            })  
          }else{
            this.$message.error('请按要求填写各项信息') 
          }
        })
      },
      // 展示编辑课题模态框
      showEditDialog(subject){ 
        this.editForm = subject
        this.editDialogVisible = true
      },
      // 学生修改课题
      studentEditSubject(editFormRef){ 
        this.$refs[editFormRef].validate(valid => {
          if(valid){
            // 验证成功，发送更新请求
            studentUpdateSubject(this.editForm).then(res => {
              if(res.success){
                this.$message.success('修改课题成功!')
                this.editDialogVisible = false
                this.getSubjectList()
              } 
            })  
          }else{
            this.$message.error('请按要求填写各项信息')
            return false;
          }
        })
      },
      cancelDeclare(subId){
        this.$confirm('确认取消申报吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 向后端发送请求，删除信息
          removeSubjectBySubId(subId).then(res => {
            if(res.success){
              this.getSubjectList()
            }
          }) 
        }).catch(() => {
          this.$message.info('取消录入!')
        })
      },
      getDeadline(){
        userGetDeadline().then(res => {
          if(res.success){
            this.deadline = res.data
          }
        })
      }
    },
    created(){
      this.getSubjectList()
      this.getTypeAndGuideTeacher()  
      this.getDeadline()
    }
  }
</script>

<style scoped>
  .el-form-item .el-input {
    width: 60%;
  }
</style>
